$(function () {
  var layer = layui.layer;
  // 1. 发请求， 查看接口文档

  init();

  // 3. 退出的功能
  $('#logout').on('click', function (e) {
    // e.preventDefault();
    // e.stopPropagation();

    layer.confirm(
      '你是否真的想退出?',
      { icon: 3, title: '提示' },
      function (index) {
        // 退出不是发送什么请求，只需要将token清空
        localStorage.removeItem('bigToken');
        // 相对和绝对路径， 一般在图片src的路径里面使用的比较多些
        // location.href = '/login.html';
        location.href = '../../login.html';

        layer.close(index);
      },
      function (index) {
        console.log(222);
        layer.close(index);
      }
    );
  });
});

function init() {
  $.ajax({
    url: '/my/userinfo',
    method: 'GET',
    // headers: {
    //   Authorization: localStorage.getItem('bigToken') || '',
    // },
    // /my开头的请求 要添加一个token属性，表明当前的用户已经登录过了， 对于没有登录的用户是不能看用户个人信息的
    success: function (res) {
      // 这里的代码  要封装， 因为我们写代码的时候 尽量一个函数保证一个功能
      if (res.status === 0) {
        renderAvatar(res);
      } else {
        layer.msg(res.message, { icon: 2 });
      }
    },
    // complete: function (res) {
    //   console.log(123, res);
    //   if (res.responseJSON.status === 1 && res.responseJSON.message === '身份认证失败！') {
    //     // 如果进入了这个if语句，就证明用户没有token值，或者说过期了；那么这种情况就是用户没有权限访问内部的所有页面； 应该强行给他跳转回登录页面，让他登录
    //     location.href = '/login.html';
    //   }
    // },
  });
}

// 封装的函数，那个是变量，那个就需要通过函数的形参传递进来
function renderAvatar(res) {
  // 只有请求成的时候 才能渲染头像和昵称
  let name = res.data.nickname || res.data.username || '管理员';
  name = name.replace(/\s/gi, '');
  $('.welcome-name').html(`欢迎你 ${name}`);
  $('.layui-nav-img').attr('src', res.data.user_pic);
  // 头像旁边的文字， 是当用户没有图像的时候，显示的替代图像
  $('.my-name').text(name[0].toUpperCase());
  if (res.data.user_pic) {
    $('.my-name').hide();
    $('.layui-nav-img').show();
  } else {
    $('.my-name').show();
    $('.layui-nav-img').hide();
  }
}
